<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>心理FM|世界和我爱着你</title>
    <link rel="stylesheet" href="css/FM_Index_md.css"/>
    <link rel="stylesheet" href="css/FM_Index_sm.css"/>
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/audio.css">
</head>
<body>
<!--FM首页-->
<div>
    <!--FM播放器-->
    <div class="fm_music">
        <h2>车大胖:世界欠我一句对不起</h2>
        <!--Fm相关-->
        <div class="fm_about">
            <a>主播:李阿華在1999</a>
            <p>生活常常充满无奈，但总有些细节让你会心一笑，让你温暖一会。然而，就是这些细小而琐碎的幸福，在我们不经意的时候，支撑着我们走过了很多道坎。</p>
        </div>
        <!--Fm播放-->
        <div class="fm_player">
            <!--最外层box-->
            <div class="audio-box">
                <div class="audio-container">
                    <div class="audio-view">
                        <div class="audio-cover"></div>
                        <div class="audio-body">
                            <h3 class="audio-title">未知歌曲</h3>
                            <div class="audio-backs">
                                <div class="audio-this-time">00:00</div>
                                <div class="audio-count-time">00:00</div>
                                <div class="audio-setbacks">
                                    <i class="audio-this-setbacks">
                                        <span class="audio-backs-btn"></span>
                                    </i>
                                    <span class="audio-cache-setbacks">
							</span>
                                </div>
                            </div>
                        </div>
                        <div class="audio-btn">
                            <div class="audio-select">
                                <div action="prev" class="icon-fast-backward"></div>
                                <div action="play" data-on="icon-play" data-off="icon-pause" class="icon-play"></div>
                                <div action="next" class="icon-fast-forward"></div>
                                <!--<div action="menu" class="icon-list-alt"></div>-->
                                <div action="volume" class="icon-volume-up">
                                    <div class="audio-set-volume">
                                        <div class="volume-box">
                                            <i><span class="audio-backs-btn"></span></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="fm_btn">
            <a href="#" class="btn_favoriteA">收藏(66)</a>
            <a href="#" class="btn_commentA">评论(66)</a>
        </div>
    </div>
    <!--FM右侧导航栏-->
    <div class="fm_sidebar">
        <!--导航栏右侧隐藏功能块-->
        <div class="fm_hide">
            <!--fm_推荐/最新-->
            <div class="fm_recommend" id="recommendClick">
                <ul class="re_tit ">
                    <li class="re_title">
                        <a href="#" class="re_new">最新</a>
                    </li>
                    <li class="re_title ">
                        <a href="#" class="re_hot">最热</a>
                    </li>
                </ul>
                <!--fm_最新内容-->
                <div class="fm_newCommend">
                    <ul class=re_content>
                        <li>
                            <a href="#">
                                <img src="img/fm_pic.png" width="70" height="70">
                            </a>
                            <div class="re_rightCon">
                                <a href="#">三观不合,朋友难做!</a>
                                <br>
                                <p>主播&nbsp;&nbsp;李阿華</p>
                                <p>收藏&nbsp;&nbsp;6</p>
                            </div>
                        </li>

                    </ul>
                    <a href="#" class="re_adMore">点击加载更多</a>
                </div>
                <!--fm_最热内容-->
                <div class="fm_hotCommend">
                    <ul class=re_content>
                        <li>
                            <a href="#">
                                <img src="img/fm_pic.png" width="70" height="70">
                            </a>
                            <div class="re_rightCon">
                                <a href="#">三观之痒,不痛不痒!</a>
                                <br>
                                <p>主播&nbsp;&nbsp;李阿華</p>
                                <p>收藏&nbsp;&nbsp;6</p>
                            </div>
                        </li>
                    </ul>
                    <a href="#" class="re_adMore">点击加载更多</a>
                </div>
            </div>
            <!--心情模塊頁面-->
            <div class="fm_mood" id="moodClick">
                <a id="test" href="#" class="fm_happy">煩躁</a>
                <a href="#" class="fm_happy">煩躁</a>
                <a href="#" class="fm_happy">華仔</a>
                <a href="#" class="fm_happy">華仔</a>
                <a href="#" class="fm_happy">華仔</a>
                <a href="#" class="fm_happy">華仔</a>
                <a href="#" class="fm_happy">華仔</a>
                <a href="#" class="fm_happy">華仔</a>
                <a href="#" class="fm_happy">華仔</a>
                <a href="#" class="fm_happy">華仔</a>
                <a href="#" class="fm_happy">華仔</a>
            </div>
            <!--場景模塊頁面-->
            <div class="fm_scene" id="sceneClick">
                <a href="#" class="fm_sleep">睡前</a>
                <a href="#" class="fm_sleep">睡前</a>
                <a href="#" class="fm_sleep">睡前</a>
                <a href="#" class="fm_sleep">睡前</a>
                <a href="#" class="fm_sleep">睡前</a>
                <a href="#" class="fm_sleep">睡你</a>
                <a href="#" class="fm_sleep">睡前</a>
                <a href="#" class="fm_sleep">睡前</a>
                <a href="#" class="fm_sleep">睡前</a>
                <a href="#" class="fm_sleep">睡前</a>
                <a href="#" class="fm_sleep">睡前</a>
            </div>
            <!--Fm 心情详情-->
            <div class="fm_happyDetails">
                <div class="fm_happyTit">
                    <span>开心</span>
                    <a href="#">返回</a>
                </div>
                <ul class="re_content">
                    <li>
                        <a href="#">
                            <img src="img/fm_pic.png" width="70" height="70">
                        </a>
                        <div class="re_rightCon">
                            <a href="#">三观不合,朋友难做!</a>
                            <br>
                            <p>主播&nbsp;&nbsp;李阿華</p>
                            <p>收藏&nbsp;&nbsp;6</p>
                        </div>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/fm_pic.png" width="70" height="70">
                        </a>
                        <div class="re_rightCon">
                            <a href="#">三观不合,朋友难做!</a>
                            <br>
                            <p>主播&nbsp;&nbsp;李阿華</p>
                            <p>收藏&nbsp;&nbsp;6</p>
                        </div>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/fm_pic.png" width="70" height="70">
                        </a>
                        <div class="re_rightCon">
                            <a href="#">三观不合,朋友难做!</a>
                            <br>
                            <p>主播&nbsp;&nbsp;李阿華</p>
                            <p>收藏&nbsp;&nbsp;6</p>
                        </div>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/fm_pic.png" width="70" height="70">
                        </a>
                        <div class="re_rightCon">
                            <a href="#">三观不合,朋友难做!</a>
                            <br>
                            <p>主播&nbsp;&nbsp;李阿華</p>
                            <p>收藏&nbsp;&nbsp;6</p>
                        </div>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/fm_pic.png" width="70" height="70">
                        </a>
                        <div class="re_rightCon">
                            <a href="#">三观不合,朋友难做!</a>
                            <br>
                            <p>主播&nbsp;&nbsp;李阿華</p>
                            <p>收藏&nbsp;&nbsp;6</p>
                        </div>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/fm_pic.png" width="70" height="70">
                        </a>
                        <div class="re_rightCon">
                            <a href="#">三观不合,朋友难做!</a>
                            <br>
                            <p>主播&nbsp;&nbsp;李阿華</p>
                            <p>收藏&nbsp;&nbsp;6</p>
                        </div>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/fm_pic.png" width="70" height="70">
                        </a>
                        <div class="re_rightCon">
                            <a href="#">三观不合,朋友难做!</a>
                            <br>
                            <p>主播&nbsp;&nbsp;李阿華</p>
                            <p>收藏&nbsp;&nbsp;6</p>
                        </div>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/fm_pic.png" width="70" height="70">
                        </a>
                        <div class="re_rightCon">
                            <a href="#">三观不合,朋友难做!</a>
                            <br>
                            <p>主播&nbsp;&nbsp;李阿華</p>
                            <p>收藏&nbsp;&nbsp;6</p>
                        </div>
                    </li>
                </ul>
                <a href="#" class="re_adMore">点击加载更多</a>
            </div>
            <!--场景詳情-->
            <div class="fm_scenarioDetails">
                <div class="fm_scenarioTit">
                    <span>睡觉</span>
                    <a href="#">返回</a>
                </div>
                <ul class="re_content">
                    <li>
                        <a href="#">
                            <img src="img/fm_pic.png" width="70" height="70">
                        </a>
                        <div class="re_rightCon">
                            <a href="#">三观不合,朋友难做!</a>
                            <br>
                            <p>主播&nbsp;&nbsp;李阿華</p>
                            <p>收藏&nbsp;&nbsp;6</p>
                        </div>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/fm_pic.png" width="70" height="70">
                        </a>
                        <div class="re_rightCon">
                            <a href="#">三观不合,朋友难做!</a>
                            <br>
                            <p>主播&nbsp;&nbsp;李阿華</p>
                            <p>收藏&nbsp;&nbsp;6</p>
                        </div>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/fm_pic.png" width="70" height="70">
                        </a>
                        <div class="re_rightCon">
                            <a href="#">三观不合,朋友难做!</a>
                            <br>
                            <p>主播&nbsp;&nbsp;李阿華</p>
                            <p>收藏&nbsp;&nbsp;6</p>
                        </div>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/fm_pic.png" width="70" height="70">
                        </a>
                        <div class="re_rightCon">
                            <a href="#">三观不合,朋友难做!</a>
                            <br>
                            <p>主播&nbsp;&nbsp;李阿華</p>
                            <p>收藏&nbsp;&nbsp;6</p>
                        </div>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/fm_pic.png" width="70" height="70">
                        </a>
                        <div class="re_rightCon">
                            <a href="#">三观不合,朋友难做!</a>
                            <br>
                            <p>主播&nbsp;&nbsp;李阿華</p>
                            <p>收藏&nbsp;&nbsp;6</p>
                        </div>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/fm_pic.png" width="70" height="70">
                        </a>
                        <div class="re_rightCon">
                            <a href="#">三观不合,朋友难做!</a>
                            <br>
                            <p>主播&nbsp;&nbsp;李阿華</p>
                            <p>收藏&nbsp;&nbsp;6</p>
                        </div>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/fm_pic.png" width="70" height="70">
                        </a>
                        <div class="re_rightCon">
                            <a href="#">三观不合,朋友难做!</a>
                            <br>
                            <p>主播&nbsp;&nbsp;李阿華</p>
                            <p>收藏&nbsp;&nbsp;6</p>
                        </div>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/fm_pic.png" width="70" height="70">
                        </a>
                        <div class="re_rightCon">
                            <a href="#">三观不合,朋友难做!</a>
                            <br>
                            <p>主播&nbsp;&nbsp;李阿華</p>
                            <p>收藏&nbsp;&nbsp;6</p>
                        </div>
                    </li>
                </ul>
                <a href="#" class="re_adMore">点击加载更多</a>
            </div>
            <!--主播模塊頁面-->
            <div class="fm_dJ" id="dJClick">
                <ul>
                    <li>
                        <a href="#" class="fm_anchor">
                            <img src="img/fm_dJ.png">李阿華
                        </a>
                    </li>
                    <li>
                        <a href="#" class="fm_anchor">
                            <img src="img/fm_dJ.png">李阿華
                        </a>
                    </li>
                    <li>
                        <a href="#" class="fm_anchor">
                            <img src="img/fm_dJ.png">李阿華
                        </a>
                    </li>
                    <li>
                        <a href="#" class="fm_anchor">
                            <img src="img/fm_dJ.png">李阿華
                        </a>
                    </li>
                    <li>
                        <a href="#" class="fm_anchor">
                            <img src="img/fm_dJ.png">李阿華
                        </a>
                    </li>
                    <li>
                        <a href="#" class="fm_anchor">
                            <img src="img/fm_dJ.png">李阿華
                        </a>
                    </li>
                    <li>
                        <a href="#" class="fm_anchor">
                            <img src="img/fm_dJ.png">李阿華
                        </a>
                    </li>
                    <li>
                        <a href="#" class="fm_anchor">
                            <img src="img/fm_dJ.png">李阿華
                        </a>
                    </li>
                    <li>
                        <a href="#" class="fm_anchor">
                            <img src="img/fm_dJ.png">李阿華
                        </a>
                    </li>
                    <li>
                        <a href="#" class="fm_anchor">
                            <img src="img/fm_dJ.png">李阿華
                        </a>
                    </li>
                    <li>
                        <a href="#" class="fm_anchor">
                            <img src="img/fm_dJ.png">李阿華
                        </a>
                    </li>
                    <li>
                        <a href="#" class="fm_anchor">
                            <img src="img/fm_dJ.png">李阿華
                        </a>
                    </li>
                    <li>
                        <a href="#" class="fm_anchor">
                            <img src="img/fm_dJ.png">李阿華
                        </a>
                    </li>
                    <li>
                        <a href="#" class="fm_anchor">
                            <img src="img/fm_dJ.png">李阿華
                        </a>
                    </li>
                    <li>
                        <a href="#" class="fm_anchor">
                            <img src="img/fm_dJ.png">李阿華
                        </a>
                    </li>
                    <li>
                        <a href="#" class="fm_anchor">
                            <img src="img/fm_dJ.png">李阿華
                        </a>
                    </li>
                    <li>
                        <a href="#" class="fm_anchor">
                            <img src="img/fm_dJ.png">李阿華
                        </a>
                    </li>
                    <li>
                        <a href="#" class="fm_anchor">
                            <img src="img/fm_dJ.png">李阿華
                        </a>
                    </li>
                    <li>
                        <a href="#" class="fm_anchor">
                            <img src="img/fm_dJ.png">李阿華
                        </a>
                    </li>
                    <li>
                        <a href="#" class="fm_anchor">
                            <img src="img/fm_dJ.png">李阿華
                        </a>
                    </li>
                    <li>
                        <a href="#" class="fm_anchor">
                            <img src="img/fm_dJ.png">李阿華
                        </a>
                    </li>
                    <li>
                        <a href="#" class="fm_anchor">
                            <img src="img/fm_dJ.png">李阿華
                        </a>
                    </li>
                    <li>
                        <a href="#" class="fm_anchor">
                            <img src="img/fm_dJ.png">李阿華
                        </a>
                    </li>
                    <li>
                        <a href="#" class="fm_anchor">
                            <img src="img/fm_dJ.png">李阿華
                        </a>
                    </li>
                </ul>
                <a href="#">点击加载更多</a>
            </div>
            <!--主播詳情頁面-->
            <div class="fm_host">
                <!--主播头像-->
                <div class="fm_hostP">
                    <a href="#">
                        <img src="img/fm_pic.png" width="100" height="100">
                    </a>
                    <a href="#" style="margin-top: -5px" ;>安然在1993</a>
                    <a href="#" class="fm_return">返回</a>
                </div>
                <!--主播节目、留言-->
                <ul class="hs_show">
                    <li class="hs_ace hs_acClick">
                        <a href="#">节目(66)</a>
                    </li>
                    <li class="hs_acer">
                        <a href="#">留言(77)</a>
                    </li>
                </ul>
                <!--节目内容-->
                <div class="re_Program">
                    <ul class="re_content">
                        <li>
                            <a href="#">
                                <img src="img/fm_pic.png" width="70" height="70">
                            </a>
                            <div class="re_rightCon">
                                <a href="#">三观不合,朋友难做!</a>
                                <br>
                                <p>主播&nbsp;&nbsp;李阿華</p>
                                <p>收藏&nbsp;&nbsp;6</p>
                            </div>
                        </li>
                    </ul>
                    <a href="#" class="re_adMore">点击加载更多</a>
                </div>
                <!--留言内容-->
                <div class="re_Message">
                    <form action="#" method="get">
                        <textarea placeholder="喜欢就要说出来~"></textarea>
                        <div>
                            <input type="submit" value="发表">
                        </div>
                    </form>
                    <ul>
                        <li>
                            <a href="#">
                                <img src="img/fm_pic.png">
                            </a>
                            <div>
                                <a href="#">胖车车</a>
                                <br>
                                <p>胖车车又胖了，快赶得上拖拉机了!
                                    胖车车又胖了，快赶得上拖拉机了!
                                    胖车车又胖了，快赶得上拖拉机了!
                                    胖车车又胖了，快赶得上拖拉机了!</p>

                                <span>2018.1.23  11:04</span>

                            </div>
                        </li>
                        <li>
                            <a href="#">
                                <img src="img/fm_pic.png">
                            </a>
                            <div>
                                <a href="#">胖车车</a>
                                <br>
                                <p>胖车车又胖了，快赶得上拖拉机了!
                                </p>

                                <span>2018.1.23  11:04</span>

                            </div>
                        </li>

                    </ul>
                    <a href="#" class="re_adMore">点击加载更多</a>
                </div>
            </div>
            <!--搜索模塊 -->
            <div class="fm_search" id="searchClick">
                <div class="sc_search">
                    <form action="#" method="get">
                        <input type="text" placeholder="輸入心情、場景、主播名">
                        <input type="submit" value="" class="sc_btn">
                    </form>
                </div>
                <div class="sc_content">
                    <span>与“阿華”相关的节目</span>
                    <ul class="re_content">
                        <li>
                            <a href="#">
                                <img src="img/fm_pic.png" width="70" height="70">
                            </a>
                            <div class="re_rightCon">
                                <a href="#">三观不合,朋友难做!</a>
                                <br>
                                <p>主播&nbsp;&nbsp;李阿華</p>
                                <p>收藏&nbsp;&nbsp;6</p>
                            </div>
                        </li>
                        <li>
                            <a href="#">
                                <img src="img/fm_pic.png" width="70" height="70">
                            </a>
                            <div class="re_rightCon">
                                <a href="#">三观不合,朋友难做!</a>
                                <br>
                                <p>主播&nbsp;&nbsp;李阿華</p>
                                <p>收藏&nbsp;&nbsp;6</p>
                            </div>
                        </li>
                        <li>
                            <a href="#">
                                <img src="img/fm_pic.png" width="70" height="70">
                            </a>
                            <div class="re_rightCon">
                                <a href="#">三观不合,朋友难做!</a>
                                <br>
                                <p>主播&nbsp;&nbsp;李阿華</p>
                                <p>收藏&nbsp;&nbsp;6</p>
                            </div>
                        </li>
                        <li>
                            <a href="#">
                                <img src="img/fm_pic.png" width="70" height="70">
                            </a>
                            <div class="re_rightCon">
                                <a href="#">三观不合,朋友难做!</a>
                                <br>
                                <p>主播&nbsp;&nbsp;李阿華</p>
                                <p>收藏&nbsp;&nbsp;6</p>
                            </div>
                        </li>
                        <li>
                            <a href="#">
                                <img src="img/fm_pic.png" width="70" height="70">
                            </a>
                            <div class="re_rightCon">
                                <a href="#">三观不合,朋友难做!</a>
                                <br>
                                <p>主播&nbsp;&nbsp;李阿華</p>
                                <p>收藏&nbsp;&nbsp;6</p>
                            </div>
                        </li>
                        <li>
                            <a href="#">
                                <img src="img/fm_pic.png" width="70" height="70">
                            </a>
                            <div class="re_rightCon">
                                <a href="#">三观不合,朋友难做!</a>
                                <br>
                                <p>主播&nbsp;&nbsp;李阿華</p>
                                <p>收藏&nbsp;&nbsp;6</p>
                            </div>
                        </li>
                        <li>
                            <a href="#">
                                <img src="img/fm_pic.png" width="70" height="70">
                            </a>
                            <div class="re_rightCon">
                                <a href="#">三观不合,朋友难做!</a>
                                <br>
                                <p>主播&nbsp;&nbsp;李阿華</p>
                                <p>收藏&nbsp;&nbsp;6</p>
                            </div>
                        </li>
                    </ul>
                    <a href="#" class="re_adMore">点击加载更多</a>
                </div>
            </div>
        </div>
        <!--导航栏左侧功能块-->
        <div class="fm_right">
            <span>
                <a href="user_Center.html" class="p_photo">
                    <img id="pic" src="img/fm_UserTou.png">
                </a>
                <a href="user_Center.html" class="p_name">李阿華</a>
            </span>
            <a href="#" id="recommended">推荐</a>
            <a href="#" id="happy">心情</a>
            <a href="#" id="scenario">场景</a>
            <a href="#" id="dJ">主播</a>
            <a href="#" id="search" class="p_img">
                <img src="img/fm_search.png">
            </a>
            <a href="index.html">首页</a>
            <a href="#">主播入口</a>
        </div>
    </div>
    <!--FM评论-->
    <div class="clickFmComments">
        <form action="#" method="get">
            <textarea placeholder="喜欢就要说出来~"></textarea>
            <div>
                <input type="submit" value="发表">
            </div>
        </form>
        <ul>
            <li>
                <a href="#">
                    <img src="img/fm_pic.png">
                </a>
                <div>
                    <a href="#">胖车车</a>
                    <br>
                    <p>胖车车又胖了，快赶得上拖拉机了!
                        胖车车又胖了，快赶得上拖拉机了!
                        胖车车又胖了，快赶得上拖拉机了!
                        胖车车又胖了，快赶得上拖拉机了!</p>

                    <span>2018.1.23  11:04</span>
                    <a href="#" class="comment_reply">回复</a>
                </div>
            </li>
            <li>
                <a href="#">
                    <img src="img/fm_pic.png">
                </a>
                <div>
                    <a href="#">胖车车</a>
                    <br>
                    <p>胖车车又胖了，快赶得上拖拉机了!</p>

                    <span>2018.1.23  11:04</span>
                    <a href="#" class="comment_reply">回复</a>
                </div>
            </li>
        </ul>
        <a href="#" class="re_adMore">点击加载更多</a>
    </div>
    <!--FM底部评论-->
    <div class="fm_comment"></div>
    <div>
        <a href="user_Center.html"><img class="fc_img" src="img/fm_UserTou.png" ></a>
        <a href="user_Center.html" class="fc_newCom">李阿華</a>
        <a href="user_Center.html" class="fc_comment">开开心心打猪皮,打得猪皮呱呱叫！</a>
    </div>
    <!--Fm Logo-->
    <div>
        <a href="FM_Index.html" class="fm_logo"></a>
    </div>
</div>

</body>
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="js/audio.js"></script>
<script type="text/javascript">
    var show = true;
    $(function () {
        //评论点击
        $(".btn_commentA").click(function () {
            $(".clickFmComments").css("display","block");
            $(".clickFmComments").animate({right:'+0px'},300);
        })
        //最新点击{
        $(".re_new ").click(function () {
            $(".fm_hotCommend").css("display", "none");
            $(".fm_newCommend").css("display", "block");
            $(".fm_happyDetails").css("display", "none");
            $(".fm_scenarioDetails").css("display", "none");
            $(".fm_sidebar").animate({right: '+0px'}, 300);

            $(this).css({"background": "black", "color": "white"});
            $(".re_hot").css({"background": "white", "color": "black"});
        });
        //最热点击
        $(".re_hot").click(function () {
            $(".fm_hotCommend").css("display", "block");
            $(".fm_newCommend").css("display", "none");
            $(".fm_happyDetails").css("display", "none");
            $(".fm_scenarioDetails").css("display", "none");
            $(".fm_sidebar").animate({right: '+0px'}, 300);

            $(this).css({"background": "black", "color": "white"});
            $(".re_new ").css({"background": "white", "color": "black"});
        });
        //推荐点击
        $("#recommended").click(function () {
            $("#recommendClick").css("display", "block");
            $("#hotRecommend").css("display", "none");
            $("#moodClick").css("display", "none");
            $("#sceneClick").css("display", "none");
            $(".fm_happyDetails").css("display", "none");
            $(".fm_scenarioDetails").css("display", "none");
            $(this).attr("class", "checked").siblings().removeClass("checked");
            $(".fm_sidebar").animate({right: '+0px'}, 300);

        });
        //心情点击
        $("#happy").click(function () {
            $("#recommendClick").css("display", "none");
            $("#hotRecommend").css("display", "none");
            $("#moodClick").css("display", "block");
            $("#sceneClick").css("display", "none");
            $(".fm_happyDetails").css("display", "none");
            $(".fm_scenarioDetails").css("display", "none");
            $(this).attr("class", "checked").siblings().removeClass("checked");
            $(".fm_sidebar").animate({right: '+0px'}, 300);
        });
        //场景点击
        $("#scenario").click(function () {
            $("#recommendClick").css("display", "none");
            $("#hotRecommend").css("display", "none");
            $("#moodClick").css("display", "none");
            $("#sceneClick").css("display", "block");
            $(".fm_happyDetails").css("display", "none");
            $(".fm_scenarioDetails").css("display", "none");
            $(this).attr("class", "checked").siblings().removeClass("checked");
            $(".fm_sidebar").animate({right: '+0px'}, 300);
        });
        //主播点击
        $("#dJ").click(function () {
            $("#recommendClick").css("display", "none");
            $("#hotRecommend").css("display", "none");
            $("#moodClick").css("display", "none");
            $("#sceneClick").css("display", "none");
            $("#dJClick").css("display", "block");
            $(".fm_happyDetails").css("display", "none");
            $(".fm_scenarioDetails").css("display", "none");
            $(this).attr("class", "checked").siblings().removeClass("checked");
            $(".fm_sidebar").animate({right: '+0px'}, 300);
        });
        $("#search").click(function () {
            $("#recommendClick").css("display", "none");
            $("#hotRecommend").css("display", "none");
            $("#moodClick").css("display", "none");
            $("#sceneClick").css("display", "none");
            $("#dJClick").css("display", "none");
            $("#searchClick").css("display", "block");
            $(".fm_happyDetails").css("display", "none");
            $(".fm_scenarioDetails").css("display", "none");
            $(".fm_host").css("display", "none");
            $(this).attr("class", "checked").siblings().removeClass("checked");
            $(".fm_sidebar").animate({right: '+0px'}, 300);
        });
        //心情详情点击
        $(".fm_happy").click(function () {
            $("#recommendClick").css("display", "none");
            $("#hotRecommend").css("display", "none");
            $("#moodClick").css("display", "none");
            $("#sceneClick").css("display", "none");
            $("#dJClick").css("display", "none");
            $("#searchClick").css("display", "none");
            $(".fm_happyDetails").css("display", "block");
            $(".fm_scenarioDetails").css("display", "none");
            $(".fm_sidebar").animate({right: '+0px'}, 300);
        });
        //场景详情点击
        $(".fm_sleep").click(function () {
            $("#recommendClick").css("display", "none");
            $("#hotRecommend").css("display", "none");
            $("#moodClick").css("display", "none");
            $("#sceneClick").css("display", "none");
            $("#dJClick").css("display", "none");
            $("#searchClick").css("display", "none");
            $(".fm_happyDetails").css("display", "none");
            $(".fm_scenarioDetails").css("display", "block");
            $(".fm_sidebar").animate({right: '+0px'}, 300);
        });
        //主播点击
        $(".fm_anchor").click(function () {
            $("#recommendClick").css("display", "none");
            $("#hotRecommend").css("display", "none");
            $("#moodClick").css("display", "none");
            $("#sceneClick").css("display", "none");
            $("#dJClick").css("display", "none");
            $("#searchClick").css("display", "none");
            $(".fm_happyDetails").css("display", "none");
            $(".fm_scenarioDetails").css("display", "none");
            $(".fm_host").css("display", "block");
            $(".fm_sidebar").animate({right: '+0px'}, 300);
        });
        //主播详情页面-点击留言
        $(".hs_acer").click(function () {
            $(".re_Message").css("display", "block");
            $(".re_Program").css("display", "none");
            $(this).attr("class", "hs_ace").siblings().removeClass("hs_ace");
        });
        //主播详情页面-点击节目
        $(".hs_acClick").click(function () {
            $(".re_Message").css("display", "none");
            $(".re_Program").css("display", "block");
            $(this).attr("class", "hs_ace").siblings().removeClass("hs_ace");
        });
        var arr = $("body").find("*");
        for (var i = 0; i < arr.length; i++) {
            arr[i].onclick = all;
        }
    });
    function all() {
        show = false;
    }
    $("body").click(function () {
        //右侧导航页面收缩
        var right = $(".fm_sidebar").css("right");
        var clickFmComments = $(".clickFmComments").css("right");
        if (right == "0px" && show == true&&clickFmComments == "0px") {
            $(".clickFmComments").animate({right: '-450px'}, 300);
        }else if (right == "0px" && show == true) {
            $(".fm_sidebar").animate({right: '-350px'}, 300);
        }else if(clickFmComments == "0px" && show == true){
            $(".clickFmComments").animate({right: '-450px'}, 300);
        }
        show = true;
    });
    //音乐播放
    window.onload = function() {

        var setConfig = {

            song : [
                {

                    //title : 'china',
                    src : 'http://jq22com.qiniudn.com/jq22m1.mp3',
                    cover : 'images/001.png'
                },
                {

                    //title : '笑脸',
                    src : 'http://jq22.qiniudn.com/2_01.mp3',
                    cover : 'images/002.png'
                }
            ],
            error : function(meg){

                console.log(meg);
            }
        };
        var audioFn = audioPlay(setConfig);

        if(audioFn){

            //开始加载音频,true为播放,false不播放
            audioFn.loadFile(1);
        }

    }
</script>
</html>